<template>
  <div class="bank-container mtop">
    <m-header title="设置提现密码"></m-header>
    <div class="pwdtool">
      <div class="text" v-if="password.length < pasDigits">请先设置提现密码，建议勿与银行卡密码相同</div>
      <div class="text" v-else>请再次输入提现密码</div>
      <div class="pwdtool-inputs" @click="showKey=true">
        <div class="area" v-for="(pas,i) in pasDigits" :key="i">
          <input class="pwd" type="password" :value="pwdList[i]" disabled>
        </div>
      </div>
    </div>
    <div class="keyboard-tool" v-if="showKey" @click.stop.prevent="showKey=false">
      <ul class="keyboard-box">
        <li class="keyitem" v-for="val in keys" :key="val"
          @click.stop="hendleKeyUp(val, $event)">{{ val }}
        </li>
        <li class="keyitem del" @click.stop="handleDel"></li>
      </ul>
    </div>

  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  components: {
  },
  data () {
    return {
      showKey: false,
      pasDigits: 6,
      keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0],
      password: '',
      rePassword: '',
      pwdList: []
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions({
      setWithdrawPsw: 'mine/setWithdrawPsw'
    }),
    hendleKeyUp (val, e) {
      if (this.pwdList.length < this.pasDigits) {
        this.pwdList.push(val);
        if (this.password.length < this.pasDigits) {
          this.password = this.pwdList.join('');
        } else {
          this.rePassword = this.pwdList.join('');
        }
        if (this.pwdList.length === this.pasDigits) {
          this.showKey = false;
          if (this.password.length === this.rePassword.length) {
            this.handleSubmit();
            return;
          }
          this.pwdList = [];
        }
      }
    },
    handleDel () {
      if (this.pwdList.length) {
        this.pwdList.pop();
      }
    },
    handleSubmit () {
      if (this.rePassword !== this.password) {
        this.password = '';
        this.rePassword = '';
        this.pwdList = [];
        this.$vux.toast.text('两次输入密码不一致，请重新输入');
      } else {
        console.log('可以提交数据');
        this.setWithdrawPsw({password: this.password}).then(res => {
          // 提交成功跳转提现页面
          const accountId = this.$route.query.accountId;
          if (accountId) {
            this.$router.replace({ path: '/bank/withdraw', query: { accountId } });
          } else {
            this.$router.replace({ path: '/bank/list' });
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .bank-container {
    background: #f7f7f7;
    .pwdtool {
      .text {
        padding: 0.9rem 0 0.3rem;
        line-height: 0.4rem;
        font-size: 0.28rem;
        color: #666666;
        text-align: center;
      }
      .pwdtool-inputs {
        position: relative;
        width: 64%;
        height: 0.8rem;
        line-height: 0.8rem;
        display: flex;
        margin: 0 auto;
        text-align: center;
        &::before {
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          content: '';
          border: 1px solid #d2d2d2;
          transform: scale(0.5);
          color: #c7c7c7;
          transform-origin: left top;
          z-index: 100;
        }
        .area {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          &::before {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            content: '';
            border-left: 1px solid #d2d2d2;
            transform: scaleX(0.5);
            color: #c7c7c7;
            transform-origin: 0 0;
          }
          &:first-child::before {
            display: none;
          }
          .pwd {
            display: block;
            width: 100%;
            height: 100%;
            font-size: 0.18rem;
            text-align: center;
          }
        }
      }
    }
    .keyboard-tool {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      .keyboard-box {
        // position: absolute;
        // width: 100%;
        // height: 68%;
        // left: 0;
        // bottom: 0;
        // color: #363636;
        // background-color: #fff;

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.16rem 0.16rem 0;
        box-sizing: border-box;
        font-size: 0.42rem;
        color: #363636;
        background: #ccc;
        .keyitem {
          width: 32%;
          height: 0.92rem;
          line-height: 0.92rem;
          margin-bottom: 0.16rem;
          background: #fff;
          text-align: center;
          border-radius: 0.1rem;
          &.del {
            background-image: url('../../../assets/imgs/mine/icon-del.png');
            background-size: 0.60rem 0.4rem;
            background-repeat: no-repeat;
            background-position: 50% 50%;
          }
        }
      }
    }
  }
</style>
